<template>
	<view class="y-flex y-flex-1 position-relative">
		<search-input v-if="enableSearch" v-model="keyword" @confirm="handleConfirm" :marginGap="pageStyle.pageMarginGap"></search-input>
		<com-tabs-list
		:current="topSubsectionSelected"
		:column="subsectionColumn"
		:bg-color="subsectionBackgroundColor"
		:text-color="skinColor.color_1"
		:border-color="skinColor.color_gap_1"
		:selected-color="subsectionSelectedColor"
		:enable-swiper="enableSwiper"
		:tabsShow="topSubsection.length > 1"
		:data="topSubsection"
		@change="handleTopTabsChange($event.current)">
			<template #left>
				<scroll-view v-if="leftSubsection.length > 1" scroll-y="true" :style="{
					'width': leftSubsectionWidth + 'rpx',
				}">
					<view class="left-subsection-item y-flex y-align-center y-justify-center"
					v-for="(left, i) in leftSubsection" :key="i"
					@tap="handleLeftTabsChange(i)"
					:style="{
						'border-left-width': leftSubsectionSelected == i ? '3px' : '',
						'border-left-color': leftSubsectionSelected == i ? subsectionSelectedColor : '',
						'background-color': leftSubsectionSelected == i ? 'rgba(0,0,0,0)' : subsectionBackgroundColor
					}">
						<text class="fs-28" :style="{color: leftSubsectionSelected == i ? subsectionSelectedColor : skinColor.color_1}">{{left.label}}</text>
					</view>
					<view class="y-flex-1" :style="{'background-color': subsectionBackgroundColor}"></view>
				</scroll-view>
			</template>
			<template v-slot="{swiper, i}">
				<module-list :ref="'list' + i"
				:component="components"
				:cell="cell"
				:bounce="pageStyle.enableBounce"
				:back-top-show="pageStyle.enableBackTop"
				:refreshImage="pageStyle.pulldownRefreshImage"
				:pulldownable="pageStyle.enablePulldown == 1"
				:loadmoreable="pageStyle.enableLoadmore == 1"
				:backTopImage="pageStyle.backTopImage"
				:loadingColor="pageStyle.loadingColor"
				:params="moduleParams"
				@scroll="handleScroll"
				@pulldown="handlePulldown(i, $event)">
				</module-list>
			</template>
		</com-tabs-list>
		<view class="position-absolute-cover y-flex y-align-center y-justify-center" v-if="topSubsection.length == 0 && leftSubsection.length == 0">
			<com-loading class="mt-20" size="45" :color="skinColor.color_1" />
		</view>
	</view>
</template>

<script>
	import SearchInput from './components/SearchInput.vue'
	import ModuleList from './components/ModuleList.vue'
	export default {
		inject: ['getPage', 'getPageStyle', 'getSkinColor', 'getQuery'],
		components: {
			SearchInput,
			ModuleList
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			//获取路由参数
			query () {
				return this.getQuery()
			},
			app () {
				return getApp().globalData
			},
			page () {
				return this.getPage()
			},
			pageStyle () {
				return this.getPageStyle()
			},
			network () {
				return this.$store.getters['network/GET']
			},
			//左选项栏宽度
			leftSubsectionWidth () {
				return this.pageStyle.leftSubsectionWidth || 150
			},
			//选项栏栏数
			subsectionColumn () {
				return this.pageStyle.subsectionColumn || 'auto'
			},
			//选项栏背景色
			subsectionBackgroundColor () {
				return this.pageStyle.subsectionBackgroundColor || this.skinColor.color_bg_1
			},
			//选项栏选中高亮色
			subsectionSelectedColor () {
				return this.pageStyle.subsectionSelectedColor || this.pageStyle.themeColor || this.skinColor.color_blue
			},
			//开启左右滑动
			enableSwiper () {
				return this.pageStyle.enableSwiper || false
			},
			//开启搜索
			enableSearch () {
				return this.pageStyle.enableSearch || false
			},
			//开启搜索后没有第一次进入页面是否主动加载一次数据（在没有keyword的情况下）
			enableSearchFirstLoad () {
				return this.pageStyle.enableSearchFirstLoad || false
			},
			cell () {
				return this.page?.cell || {}
			},
			components () {
				return this.page?.components || []
			},
			//第一次加载是否加载选项栏以外的数据
			isFirstLoad () {
				return !this.enableSearch || (this.enableSearch && this.enableSearchFirstLoad) || this.keyword
			}
		},
		data () {
			return {
				topSubsection: [],//顶部选项栏数据
				topSubsectionSelected: 0,//顶部选项栏选中索引
				leftSubsection: [],//左选项栏数据
				leftSubsectionSelected: 0,//左选项栏选中索引
				moduleParams: {},//模块参数
				keyword: ''//搜索关键词
			}
		},
		mounted() {
			this.refresh()
		},
		methods: {
			refresh () {
				this.topSubsection = []
				this.topSubsectionSelected = 0
				this.leftSubsection = []
				this.leftSubsectionSelected = 0
				this.keyword = this.query.keyword || ''
				this.handleGetSubsection()
			},
			handleScroll (e) {
				this.$emit('scroll', Math.abs(e.contentOffset.y))
			},
			handleConfirm () {
				if ( !this.keyword ) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					})
					return
				}
				this.handlePulldown(this.topSubsectionSelected)
			},
			async handlePulldown (key, callback) {
				this.moduleParams = Object.assign({}, this.query, {keyword: this.keyword, top: this.topSubsection[this.topSubsectionSelected].value, left: this.leftSubsection[this.leftSubsectionSelected].value})
				this.$nextTick(function () {
					this.$refs['list' + key] && this.$refs['list' + key].initModule(callback, callback || !this.enableSwiper)
				})
			},
			async handleGetSubsection () {
				const topSubsection = this.page?.topSubsection || null
				let topData = []
				if ( topSubsection ) {
					const params = Object.assign({}, this.query, {keyword: this.keyword})
					const staticData = topSubsection.staticData ? await this.network.staticDataHandle(topSubsection.staticData, params) : []
					const dynamicData = topSubsection.dynamicData || null
					const request = topSubsection.request
					topData = topData.concat(staticData)
					const newRequest = request ? await this.network.requestHandle(request, params) : null
					const response = newRequest ? await this.network.$request(newRequest) : {}
					if ( response.data && dynamicData ) {
						const list = await this.network.$list(dynamicData, response.data, response.taskId)
						topData = topData.concat(list)
					}
				}
				const leftSubsection = this.page?.leftSubsection || null
				let leftData = []
				if ( leftSubsection ) {
					const params = Object.assign({}, this.query, {keyword: this.keyword})
					const staticData = leftSubsection.staticData ? await this.network.staticDataHandle(leftSubsection.staticData, params) : []
					const dynamicData = leftSubsection.dynamicData || null
					const request = leftSubsection.request
					leftData = leftData.concat(staticData)
					const newRequest = request ? await this.network.requestHandle(request, params) : null
					const response = newRequest ? await this.network.$request(newRequest) : {}
					if ( response.data && dynamicData ) {
						const list = await this.network.$list(dynamicData, response.data, response.taskId)
						leftData = leftData.concat(list)
					}
				}
				this.topSubsection = topData
				this.leftSubsection = leftData
				if ( this.query.top ) {
					const index = this.topSubsection.findIndex(t => t.value == this.query.top)
					this.topSubsectionSelected = index > -1 ? index : 0
				}
				if ( this.query.left ) {
					const index = this.leftSubsection.findIndex(t => t.value == this.query.left)
					this.leftSubsectionSelected = index > -1 ? index : 0
				}
				this.$nextTick(function () {
					setTimeout(() => {
						this.$emit('loaded', true)
						if ( this.isFirstLoad ) this.handlePulldown(this.topSubsectionSelected)
					}, 100)
				})
			},
			handleTopTabsChange (index) {
				if ( this.changeTimer ) {
					clearTimeout(this.changeTimer)
					this.changeTimer = null
				}
				this.topSubsectionSelected = index
				this.$nextTick(function () {
					this.changeTimer = setTimeout(() => {
						this.handlePulldown(this.topSubsectionSelected)
					}, 300)
				})
			},
			handleLeftTabsChange (index) {
				if ( this.changeTimer ) {
					clearTimeout(this.changeTimer)
					this.changeTimer = null
				}
				this.leftSubsectionSelected = index
				this.$nextTick(function () {
					this.changeTimer = setTimeout(() => {
						this.handlePulldown(this.topSubsectionSelected)
					}, 300)
				})
			}
		}
	}
</script>

<style>
	.left-subsection-item {
		height: 120rpx;
	}
</style>